<script setup>
import Header from './components/Header.vue';
import Navigator from './components/Navigator.vue';
import Content from './components/Content.vue';
import { ref } from 'vue';

  let message = ref('XX');
  // 接收Navigator的事件
  const getMessage = function(data) {
      message.value = data;
  }
</script>

<template>
  <div>
    <Header v-bind:class="'header'"></Header>
    <Navigator @content="getMessage" class="navigator"></Navigator>
    <Content :class="'content'" :messageContent="message"></Content>
  </div>
</template>

<style scoped>
  .header{
    border: 1px solid green;
    height: 50px;
  }
  .navigator{
    border: 1px solid red;
    float: left;
    width: 15%;
    height: 725px;
  }
  .content{
    border: 1px solid black;
    float: left;
    width: 84.8%;
    height: 725px;
  }
</style>
